<script lang="ts" setup>
import { reactive, onMounted, onActivated } from 'vue'
import { queryUserInfoDetailOrder } from '@/api/user'
import IdForm from '@/components/form/IdForm.vue'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import {
  queryUserInfoDetailOrderRequestData,
  queryUserInfoDetailOrderTableCol,
  IllegalChargesDetailOrderTableCol
} from '@/api/user/types/user'
import { useTable } from '@/hooks/useTable'
const route = useRoute()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: route.query.phone as string,
  orderId: route.query.orderId as string,
  type: '',
  selectType: 'feeChange'
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)

onActivated(() => {
  form.phone = route.query.phone as string
  form.orderId = route.query.orderId as string
})
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
defineExpose({ load })

const refund = (id: string) => {}
</script>

<template>
  <id-form v-model="form" @search="handleFormSearch" type="bike">
    <template #before>
      <el-form-item prop="orderId" label="充值订单号">
        <el-input v-model="form.orderId" placeholder="请输入充值订单号" />
      </el-form-item>
    </template>
  </id-form>
  <el-table
    v-loading="loading"
    class="no-border"
    :data="data as IllegalChargesDetailOrderTableCol[]"
  >
    <el-table-column prop="bikeCode" label="车辆编号" align="center" min-width="100px" />
    <el-table-column
      prop="operationType"
      label="收费类型"
      align="center"
      min-width="100px"
    ></el-table-column>
    <el-table-column
      prop="reason"
      label="费用说明"
      align="center"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="orderId"
      label="关联订单号/行程编号"
      align="center"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="payTime"
      label="收款时间"
      align="center"
      min-width="150px"
      show-overflow-tooltip
    />
    <el-table-column prop="amount" label="收款金额" align="center" min-width="100px" />
    <el-table-column
      prop="payStatus"
      label="支付状态"
      align="center"
      min-width="100px"
    ></el-table-column>
    <el-table-column
      prop="paymentType"
      label="支付方式"
      align="center"
      min-width="100px"
    ></el-table-column>
    <el-table-column
      prop="tradeNo"
      label="收费订单号"
      align="center"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="operator"
      label="操作人"
      align="center"
      min-width="120px"
      show-overflow-tooltip
    />
    <el-table-column prop="remark" label="备注" align="center" min-width="100px" />
    <el-table-column label="操作" align="center" min-width="100px">
      <!-- <template #default="scope">
        <el-button type="primary" link @click="refund(scope.row.orderId)">退费</el-button>
      </template> -->
    </el-table-column>
  </el-table>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
